<template>
	<mu-paper :z-depth="1" class="demo-list-wrap">
		<mu-appbar color="#4DA692">
			<mu-button @click="esc" icon slot="left">
				<mu-icon value="keyboard_arrow_left"></mu-icon>
			</mu-button>
			设置
		</mu-appbar>

		<mu-list textline="two-line">
			<vs-divider color="danger">个人信息</vs-divider>
			<mu-list-item avatar button :ripple="false">
				<mu-list-item-action>
					<mu-avatar>
						<img src="https://forum.alexs.fun/me/user/head1.jpg">
					</mu-avatar>
				</mu-list-item-action>
				<mu-list-item-title>向、张、翟、胡</mu-list-item-title>
				<mu-list-item-action>
					<mu-button href="https://gitee.com/corgile/project" flat color="primary">代码仓库</mu-button>
				</mu-list-item-action>
			</mu-list-item>
		</mu-list>
		<mu-list>
			<vs-divider color="#ad289f">声音开启设置</vs-divider>
			<mu-list-item button :ripple="false" @click="events = !events">
				<mu-list-item-title>
					事件和提醒
				</mu-list-item-title>
				<mu-list-item-action>
					<mu-switch v-model="events" readonly></mu-switch>
				</mu-list-item-action>
			</mu-list-item>
			<mu-list-item button :ripple="false" @click="calls = !calls">
				<mu-list-item-title>
					电话
				</mu-list-item-title>
				<mu-list-item-action>
					<mu-switch v-model="calls" readonly></mu-switch>
				</mu-list-item-action>
			</mu-list-item>
			<mu-list-item button :ripple="false" @click="messages = !messages">
				<mu-list-item-title>
					信息
				</mu-list-item-title>
				<mu-list-item-action>
					<mu-switch v-model="messages" readonly></mu-switch>
				</mu-list-item-action>
			</mu-list-item>
		</mu-list>
		<mu-list>
			<vs-divider color="primary">通知设置</vs-divider>
			<mu-list-item button :ripple="false" @click="notifications = !notifications">
				<mu-list-item-action>
					<mu-checkbox v-model="notifications" readonly></mu-checkbox>
				</mu-list-item-action>
				<mu-list-item-title>
					通知
				</mu-list-item-title>
			</mu-list-item>
			<mu-list-item button :ripple="false" @click="sounds = !sounds">
				<mu-list-item-action>
					<mu-checkbox v-model="sounds" readonly></mu-checkbox>
				</mu-list-item-action>
				<mu-list-item-title>
					声音
				</mu-list-item-title>
			</mu-list-item>
			<mu-list-item button :ripple="false" @click="videoSounds = !videoSounds">
				<mu-list-item-action>
					<mu-checkbox v-model="videoSounds" readonly></mu-checkbox>
				</mu-list-item-action>
				<mu-list-item-title>
					视频的声音
				</mu-list-item-title>
			</mu-list-item>
		</mu-list>
	</mu-paper>

</template>
<script>
export default {
	name: 'MySettings',
	props:{
		esc: Function
	},
	data() {
		return {
			events: false,
			calls: false,
			messages: false,
			notifications: false,
			sounds: false,
			videoSounds: false
		}
	}
}
</script>

<style>
	.demo-list-wrap {
		width: 100%;
		max-width: 360px;
		overflow: hidden;
	}
</style>